<template>
  <view class="chat-container h-screen bg-gray-100">
    <!-- 顶部导航栏 -->
    <view class="nav-bar flex items-center px-4 py-2 bg-white border-b border-gray-200">
      <view class="back-icon" @tap="navigateBack">
        <text class="iconfont icon-back text-lg text-gray-600">←</text>
      </view>
      <view class="title flex-1 text-left ml-4 text-sm font-medium">
        {{ chatInfo.name }}
      </view>
    </view>

    <!-- 聊天内容区域 -->
    <scroll-view
      class="chat-content w-full flex-1 px-4 py-2"
      scroll-y
      :scroll-into-view="scrollToBottom"
    >
      <!-- 系统提示消息 -->
      <view class="system-message bg-white rounded-lg p-4 mb-4">
        <view class="text-center text-gray-400 text-sm mb-2">2025/01/14 23:10</view>
        <view class="bg-gray-50 rounded p-3">
          <view class="text-gray-700 text-xs mb-2">聊天小贴士</view>
          <view class="text-gray-600 text-xs">
            <view class="mb-2">1. 在交友过程中，请谨慎与对方互换联系方式，如手机号、真实地址</view>
            <view class="mb-2"
              >2.
              任何以赠博、彩票、投资理财等为名义的钱财往来要求，都极有可能是诈骗。请您务必谨慎</view
            >
            <view>3. 如果聊天过程中对方发送不良信息或被恶意骚扰，请及时拉黑并举报</view>
          </view>
        </view>
      </view>

      <!-- 聊天消息 -->
      <view v-for="(msg, index) in messages" :key="index" class="mb-4">
        <view :class="['flex', msg.isSelf ? 'justify-end' : 'justify-start']">
          <view class="flex items-start max-w-[70%]" :class="msg.isSelf ? 'flex-row-reverse' : ''">
            <image :src="msg.avatar" class="w-10 h-10 rounded-full" mode="aspectFill" />
            <view
              class="flex-1 mx-2 p-3 rounded-lg text-sm"
              :class="msg.isSelf ? 'bg-blue-500 text-white' : 'bg-white text-gray-700'"
            >
              {{ msg.content }}
            </view>
          </view>
        </view>
      </view>
    </scroll-view>

    <!-- input background container -->
    <view class="px-2 bg-gray py-2">
      <view class="flex justify-between items-center bg-gray-200 w-full rounded-xl py-2 px-4">
        <!-- Clip Icon -->
        <svg
          class="size-6 rotate-45 text-gray-800"
          aria-hidden="true"
          xmlns="http://www.w3.org/2000/svg"
          width="24"
          height="24"
          fill="none"
          viewBox="0 0 24 24"
        >
          <path
            stroke="currentColor"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            d="M7 8v8a5 5 0 1 0 10 0V6.5a3.5 3.5 0 1 0-7 0V15a2 2 0 0 0 4 0V8"
          />
        </svg>
        <!-- Text Input -->
        <input type="text" placeholder="输入消息" class="bg-transparent outline-0 flex-1 mx-3" />
        <!-- Send Icon -->
        <svg
          class="size-6 rotate-45 text-blue-700"
          aria-hidden="true"
          xmlns="http://www.w3.org/2000/svg"
          width="24"
          height="24"
          fill="currentColor"
          viewBox="0 0 24 24"
        >
          <path
            fill-rule="evenodd"
            d="M12 2a1 1 0 0 1 .932.638l7 18a1 1 0 0 1-1.326 1.281L13 19.517V13a1 1 0 1 0-2 0v6.517l-5.606 2.402a1 1 0 0 1-1.326-1.281l7-18A1 1 0 0 1 12 2Z"
            clip-rule="evenodd"
          />
        </svg>
      </view>
    </view>

    <!-- 底部输入框 -->
    <!-- <view class="input-area flex items-center px-4 py-2 bg-white border-t border-gray-200">
      <input
        type="text"
        v-model="inputMessage"
        class="flex-1 px-4 h-10 bg-gray-100 rounded-full mr-2 text-sm"
        placeholder="输入消息..."
      />
      <button class="bg-blue-500 w-10 text-white text-sm px-1 py-1 rounded-1" @tap="sendMessage">
        发送
      </button>
    </view> -->
  </view>
</template>

<script lang="ts" setup>
import { ref, reactive } from 'vue'

const chatInfo = reactive({
  name: 'Lucky Regina',
  avatar: 'https://image.uisdc.com/wp-content/uploads/2023/08/Character-avatar-20230802-1.png',
})

const messages = ref([
  {
    content: 'Hi, 我们可以开始聊天啦',
    isSelf: false,
    avatar: 'https://image.uisdc.com/wp-content/uploads/2023/08/Character-avatar-20230802-1.png',
  },
  {
    content: '哈咻～期待你完成双重认证，这样咱们就可以聊天啦',
    isSelf: false,
    avatar: 'https://image.uisdc.com/wp-content/uploads/2023/08/Character-avatar-20230802-1.png',
  },
  {
    content: '你好呀，没有通过认证我没办法和你对话哦，希望你去完成双重认证之后来找我～',
    isSelf: false,
    avatar: 'https://image.uisdc.com/wp-content/uploads/2023/08/Character-avatar-20230802-1.png',
  },
])

const inputMessage = ref('')
const scrollToBottom = ref('')

const navigateBack = () => {
  uni.navigateBack()
}

const sendMessage = () => {
  if (!inputMessage.value.trim()) return

  messages.value.push({
    content: inputMessage.value,
    isSelf: true,
    avatar:
      'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSC28lvhB3X_P4cDQ17N2RQvttJRUYagluoPw&s',
  })

  inputMessage.value = ''

  // 模拟对方回复
  setTimeout(() => {
    messages.value.push({
      content: '请先完成双重认证后再联系我哦～',
      isSelf: false,
      avatar: 'https://upen.caup.net/ai_pics_mj/202303/1677952366325269.jpg',
    })
  }, 1000)
}
</script>

<style lang="scss">
.chat-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.chat-content {
  flex: 1;
  overflow-y: auto;
}

.nav-bar {
  padding-top: var(--status-bar-height);
}
</style>
